<template>
  <div class="register">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h3 class="title">欢迎使用</h3>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择">
          <el-option v-for="item in sexDict" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birthday">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否参保" prop="isInsurance">
        <el-select v-model="form.isInsurance" placeholder="请选择">
          <el-option v-for="item in isInsuranceDict" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="submit">
        <span v-if="!loading">注册</span>
        <span v-else> 正在注册,请稍后...</span>
      </el-button>
      <el-button type="primary" @click="toLogin">已有账号？点击前往登录</el-button>
    </el-form>
  </div>
</template>
<script>
import { register } from "../api/register";

export default {
  name: 'Register',
  data() {
    return {
      loading: false,
      sexDict: [
        {
          value: '0',
          label: '男'
        },
        {
          value: '1',
          label: '女'
        }
      ],
      isInsuranceDict: [
        {
          value: '0',
          label: '已参保'
        },
        {
          value: '1',
          label: '未参保'
        }
      ],
      form: {
        name: '',
        username: '',
        password: '',
        phone: '',
        idCard: '',
        sex: '',
        birthday: '',
        isInsurance: '',
        money: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthday: [
          { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        isInsurance: [
          { required: true, message: '请选择是否参保', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 点击跳转到登录页面
    toLogin() {
      this.$router.replace('/login');
    },
    // 点击注册
    submit() {
      this.loading = true;
      register(this.form).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.$router.replace('/login');
        } else {
          console.log(res);
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.loading = false;
      });
    }
  }
}
</script>
<style>
/* 内容样式 */
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 385px;
  background-size: contain;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
}
/* 注册div样式 */
.register {
      text-align: center;
      margin: auto;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background: url(../assets/th2.jpg) no-repeat center;
      background-size: 100% 100%;
}
/* 表格样式-位置背景 */
.login-form{
      text-align: center;width: 25vw;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);opacity: 0.75;
      background: url(../assets/th3.jpg) no-repeat;
      background-size: 0;
}
/* 标题 欢迎使用样式 */
.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}
/* css去重 */
*{
  padding: 0;
  margin: 0;
}
</style>
